<template>
  <div>
    <NavBar>
      <template #title>
        会员登录
      </template>
    </NavBar>
    <div class="reg">
      <div class="title">
          <h2>手机号登录</h2>
          <span>未注册的手机号登录后将自动注册</span>
      </div>
      <form action="">
        <div class="phone">
          <input type="text" placeholder="请输入手机号码" v-model="phone">
        </div>
        <div class="imgcode">
          <input  placeholder="请输入图形验证码" v-model="imgcode">
          <img alt="" :src="imgsrc" @click="getimg()">
        </div>
        <div class="msgcode">
          <input type="text" placeholder="请输入短信验证码" v-model="msgcode">
          <button @click="getcode($event)">获取验证码</button>
        </div>
      </form>
      <div class="button">
          <button @click="login">登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { getimg, getcode, phonelogin } from '@/api/login'
export default {
  name: 'LoginIndex',
  data () {
    return {
      imgsrc: '',
      imgkey: '',
      phone: '',
      imgcode: '',
      msgcode: ''
    }
  },
  created () {
    this.getimg()
  },
  methods: {
    ...mapMutations('user', ['setuserinfo']),
    async getcode (e) {
      if (this.validatePhone(this.phone) && this.validateCaptcha(this.imgcode)) {
        let i = 60
        e.target.disabled = true
        e.target.innerHTML = `${i}s后重新获取`
        this.timer = setInterval(() => {
          i--
          e.target.innerHTML = `${i}s后重新获取`
          if (i === 0) {
            clearInterval(this.timer)
            e.target.innerHTML = '获取验证码'
            e.target.disabled = false
          }
        }, 1000)
        const result = await getcode(this.imgcode, this.imgkey, this.phone)
        console.log(result)
        this.$toast('获取验证码成功')
      } else {
        this.$toast('手机号或验证码格式错误')
      }
    },
    async getimg () {
      const result = await getimg()
      console.log(result)
      this.imgsrc = result.data.base64
      this.imgkey = result.data.key
    },
    validatePhone (phone) {
      const reg = /^1[3-9]\d{9}$/
      return reg.test(Number(phone))
    },
    validateCaptcha (code) {
      const reg = /^[A-Za-z0-9]{4}$/ // 4位字母或数字
      return reg.test(code)
    },
    async login () {
      const result = await phonelogin(false, this.phone, {}, this.msgcode)
      console.log(result)
      this.$toast('登陆成功')
      this.setuserinfo(result.data)

      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        if (this.$route.query.redirect) {
          this.$router.replace(this.$route.query.redirect)
        } else {
          this.$router.push('/home')
        }
      }, 1000)
    }
  }
}
</script>

<style scoped>

.reg {
    margin: 0 auto;
    margin-top: 60px;
    width: 350px;
    height: 350px;

}
.reg .title h2{
  font-weight: 400
}
.reg .title span{
  display: block;
  margin-top: 7px;
  color: #bcbcb3;
  font-size: 14px;
}
.reg form{
  margin-top: 30px;
}
.reg form div{
  /* 这里用flex布局会比较容易，这样img就可以不用设置行内 */
  display: flex;
  /* gap用于设置内容之间的间隙 */
  gap: 10px;
  height: 50px;
  border-bottom: 1px solid rgb(216, 215, 215);
}
.reg form div input{
  /* 注意这个flex：1 */
  flex: 1;
  padding-left: 10px;
  border: none;
  outline: none;
  font-size: 14px;
}
.reg .imgcode img{
  margin-top: 10px;
  width: 80px;
  height: 30px;
}
.reg .msgcode button{
  margin-top: 10px;
  width: 80px;
  height: 30px;
  font-size: 12px;
  border: none;
  outline: none;
  background-color: transparent;
  color: orange;
}
.reg .button button{
  display: block;
  margin-top: 30px;
  width: 100%;
  height: 40px;
  outline: none;
  border: none;
  border-radius: 20px;
  background: linear-gradient(90deg,#ecb53c,#ff9211);
  color: white;
  letter-spacing: 2px;
  box-shadow: 0 10px 20px 0 rgba(0,0,0,.1);
}

</style>
